/**
 * Created with Vim7.3 Mac
 * @fileOverview : 
 * @author : Lyle lylechen2014@gmail.com
 * @since : 2016-08-29 11:35:38
 * @filename : src/components/userProfileDetails.js
 * @version : 
 * @description : 
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    ScrollView
} from 'react-native';

let { width, height } = Utils.size;
let userObj;

class UserProfileDetails extends Component {

    constructor(props) {
        super(props);
        userObj = this.props.userInfo;
        this.state = {};
    }

    render() {
    	
    	let detailsObj = this.getDetails();

        return (
    	    <View style={styles.userProfileDetails}>
                <View style={styles.rowProfile}>
                   <View style={styles.between}>   
                       <Text style={styles.betweenText}>{Lang.myProfileDetails_worth}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_annualIncome} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.income}</Text>
                   </View>
                </View>

                <View style={styles.rowProfile}>
                   <View style={styles.between}>   
                       <Text style={styles.betweenText}>Appearance</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                            {Lang.myProfileDetails_height} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.height}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                            {Lang.myProfileDetails_eyeColor}
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.eyes}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                            {Lang.myProfileDetails_hairColor}
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.hair}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                            {Lang.myProfileDetails_bodyType}
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.body}</Text>
                   </View>
                </View>

                <View style={styles.rowProfile}>
                   <View style={styles.between}>   
                       <Text style={styles.betweenText}>{Lang.myProfileDetails_lifeStyle}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_occupation} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.occupation}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_smoking} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.smoker}</Text>
                   </View>
                    <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_drinking} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.drinker}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_haveChildren} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.have_children}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_wantChildren} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.want_children}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_havePets} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.have_pets}</Text>
                   </View>
                </View>

                <View style={styles.rowProfile}>
                   <View style={styles.between}>   
                       <Text style={styles.betweenText}>{Lang.myProfileDetails_personalInfo}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_education} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.education}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_ethnicity} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.ethnicity}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_language} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.language}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_politicalBeliefs} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.political}</Text>
                   </View>
                   <View style={styles.between}>  
                        <Text style={styles.profileKey}>
                           {Lang.myProfileDetails_religion} 
                        </Text>
                        <Text style={styles.profileValue}>{detailsObj.religion}</Text>
                   </View>
                </View>
            </View>
        );
    }

    getDetails() {
    	let obj = {
                income : Share.searchSelect('local_type',userObj.detail.worth.income, Lang.app_noPreference),
                height : Share.searchSelect('local_height',userObj.detail.basics.height),
                eyes : Share.searchSelect('local_eyes',userObj.detail.basics.eyes_color),
                hair : Share.searchSelect('local_hair',userObj.detail.basics.hair_color),
                body : Share.searchSelect('local_body',userObj.detail.basics.body_type),
                smoker : Share.searchSelect('local_smoker',userObj.detail.lifestyle.smoking),
                drinker : Share.searchSelect('local_drinker',userObj.detail.lifestyle.drinking),
                have_children : Share.searchSelect('local_have_children',userObj.detail.lifestyle.have_children),
                have_pets : Share.searchSelect('local_pets',userObj.detail.lifestyle.have_pets),
                want_children : Share.searchSelect('local_want_children',userObj.detail.lifestyle.want_children),
                education : Share.searchSelect('local_education',userObj.detail.personalinfo.education),
                ethnicity : Share.searchSelect('local_ethnicity',userObj.detail.personalinfo.ethnicity),
                language : Share.showCheckboxLabel('local_language',userObj.detail.personalinfo.language,', '),
                occupation : Share.searchSelect('local_occupation',userObj.detail.personalinfo.occupation),
                political : Share.searchSelect('local_political_beliefs',userObj.detail.personalinfo.political),
                religion : Share.searchSelect('local_religion',userObj.detail.personalinfo.religion),
                //networth : Share.searchSelect('local_net_worth',userObj.detail.worth.net_worth)
            };
        return obj;
    }

}

const styles = StyleSheet.create({

    userProfileDetails:{
      flex:1,
    	width:width,
    	backgroundColor:'#fff',
    	paddingTop:10,
    },

    rowColumn: {
        marginLeft:15,
        marginRight:15,
        marginTop:10,
        marginBottom:10,
        borderBottomWidth:1,
        borderColor:'#ccc',
        paddingBottom:5,

    },

    rowColumnText: {
       fontSize:20,
       color:'#3FAFE4',
    },

    rowProfile: {
        marginLeft:15,
        marginRight:15,
        marginTop:10,
        marginBottom:10,
    },

    between: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'flex-start',
    },

    betweenText: {
    	color:'#3FAFE4',
    },

    editIcon: {
    	width:15,
    	height:15, 
    },

    profileKey: {
    	flex:3,
    	marginTop:10,
        color:'#666',
        textAlign:'right',
        paddingRight:15,
    },

    profileValue: {
    	flex:4,
    	paddingTop:2,
    	marginTop:10,
        color:'#000',
        fontSize:12,
    },

});

export default UserProfileDetails;
